<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
import { addressListApi, getMedicalOrderLogistics } from '@/apis/order'
import type { Address, ExpressData } from '@/types/order'
import { ref } from 'vue'

// 0.获取地址信息
const address = ref({} as Address)
const getAddress = async () => {
  const res = await addressListApi()
  console.log(res)
  address.value = res[0]
}
getAddress()

// 1. 获取 物流数据
const props = defineProps<{ id: string }>()
const logisticData = ref({} as ExpressData)
const getMedicalOrderData = async () => {
  const res = await getMedicalOrderLogistics(props.id)
  console.log(res)
  logisticData.value = res
}


// 2. 整合高德地图
import { onMounted, onUnmounted } from 'vue'
// #ifdef H5
import AMapLoader from '@amap/amap-jsapi-loader'

// 自定义 marker 地图上的点
import carImg from '@/static/images/car.png'
import startImg from '@/static/images/start.png'
import endImg from '@/static/images/end.png'

let map: any = null
// #endif
onMounted(async() => {
  // 【等待】 接口数据返回 再初始化地图数据
  await getMedicalOrderData()
  // #ifdef H5
  window._AMapSecurityConfig = {
    securityJsCode: 'fa7096b37875e7ec68f51fdced71d771',
  }

// 拷贝一份数据进行修改
const points = [...logisticData.value.logisticsInfo]
// 起点 弹出第一个数据
const startPoint = points.shift()
// longitude 经度  latitude纬度
const start = [startPoint?.longitude, startPoint?.latitude]
// 终点
const endPoint = points.pop()
// longitude 经度  latitude纬度
const end = [endPoint?.longitude, endPoint?.latitude]
// 途经点
const wayPoints = points.map(v => {
  return [v.longitude, v.latitude]
})

  AMapLoader.load({
    key: 'f0372f01454efd7dfe4b47034f053810', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then(AMap => {
      // 实例化地图
      // 容器的 id 叫做 map 直接写即可
      map = new AMap.Map('map', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      })

       // 规划 路径
      // 引入插件
      AMap.plugin('AMap.Driving', () => {
        const driving = new AMap.Driving({
          map: map, // 指定轨迹显示地图实例
          showTraffic: false, // 关闭交通状态
          hideMarkers: true,
        })
        // // 开始位置坐标
        // const startLngLat = [112.379028, 35.865042]
        // // 结束位置坐标
        // const endLngLat = [118.427281, 40.903719]

        // 通过 search 方法根据地图信息 动态规划行走的路线
        driving.search(start, end, { waypoints: wayPoints }, function (status: string, result: object) {
          // 未出错时，result即是对应的路线规划方案
        })
      })

       // 自定义 Marker
       const startMarker = new AMap.Marker({
        icon: startImg, // 设置自定义图片
        position: start, // 图片显示的坐标位置
      })
      const endMarker = new AMap.Marker({
        icon: endImg, // 设置自定义图片
        position: end, // 图片显示的坐标位置
      })
      const currentPoint = [logisticData.value.currentLocationInfo.longitude, logisticData.value.currentLocationInfo.latitude]
      const carMarker = new AMap.Marker({
        icon: carImg, // 设置自定义图片
        position: currentPoint, // 图片显示的坐标位置
      })

      // 地图的添加方法 追加进去
      map.add(startMarker)
      map.add(endMarker)

      // 当前的汽车所在位置
      map.add(carMarker)

      // 稍等一会 聚焦到汽车的位置
      setTimeout(() => {
        map.setFitView([carMarker])
        map.setZoom(15)
      }, 3000)
    })
    .catch(e => {
      console.log(e)
    })
    // #endif
})

onUnmounted(() => {
  map?.destroy()
})
// 其他平台 可以继续添加 条件的注释，编写对应的代码
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <view id="map" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticData.statusValue }}</cover-view>
      <cover-view class="extra"> {{ logisticData.estimatedTime }} {{ logisticData.name }} {{ logisticData.awbNo }} </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：{{ address.addressDetail }} </view>
        </view>
        <view class="line" v-for="item in logisticData.list" :key="item.id">
          <!-- 因为数据 只有 1,2，3这 3 种状态 为了测试 调整一下判断的逻辑 -->
          <view v-if="item.status == 1" class="badge dot">
            <!-- <uni-icons custom-prefix="iconfont" color="#2cb5a5" size="15" type="icon-checked" /> -->
          </view>
          <view v-if="item.status == 2" class="badge icon">
            <uni-icons custom-prefix="iconfont" color="#2cb5a5" size="15" type="icon-truck" />
          </view>
          <view v-if="item.status == 3" class="badge icon">
            <uni-icons custom-prefix="iconfont" color="#2cb5a5" size="15" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content"> {{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
